<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/prod_left :: nav(12)" />

    <div class="container-fluid" id="pcont">

        <div class="cl-mcont">


            <!--原料价格走势图-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <h4>原料价格走势图</h4>

                        </div>
                        <div class="content">
                            <div id="feedpriceChart" style="width: 1000px;height:300px;"></div>

                        </div>

                    </div>


                </div>
            </div>

            <!--原料价格走势图end-->

            <!--排行榜-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <h4>排行榜</h4>

                        </div>
                        <div class="content">

                            <div class="row">

                                <div class="col-md-6 col-sm-6">
                                    <!--价格排行-->
                                    <div class="block-flat">
                                        <div class="header">


                                            <h4>原料价格排行 Top10</h4>

                                        </div>



                                        <div class="content">
                                            <table class="no-border blue">
                                                <thead class="no-border">
                                                <tr>
                                                    <th>排行</th>
                                                    <th>原料名称</th>
                                                    <th>平均单价(元)</th>
                                                    <th>同比</th>
                                                    <th>环比</th>
                                                </tr>
                                                </thead>
                                                <tbody class="no-border-x" th:each="map:${maplist}">
                                                <tr>
                                                    <td th:text="${mapStat.index+1}">1</td>
                                                    <td th:text="${map['type']}" class="feedtype">玉米</td>
                                                    <td th:text="${map['price']}">3000</td>
                                                    <td>1%</td>
                                                    <td class="text-right color-success"><i class="fa fa-angle-up"></i>48.06%</td>
                                                </tr>

                                                </tbody>
                                            </table>

                                        </div>

                                    </div>


                                </div>

                                <div class="col-md-6 col-sm-6">
                                    <!--地区排行-->
                                    <div class="block-flat">
                                        <div class="header">

                                            <h4>消耗地区排行 Top10</h4>

                                        </div>
                                        <div class="content">

                                            <table class="no-border blue">
                                                <thead class="no-border">
                                                <tr>
                                                    <th>排行</th>
                                                    <th>地区名称</th>
                                                    <th>数量(吨)</th>

                                                </tr>
                                                </thead>
                                                <tbody class="no-border-x" th:each="map1:${mapList1}">
                                                <tr>
                                                    <td th:text="${map1Stat.index+1}">1</td>
                                                    <td th:text="${map1['city']}">浦东</td>
                                                    <td th:text="${map1['sum']}">3000</td>

                                                </tr>

                                                </tbody>
                                            </table>

                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>


                </div>
            </div>


        </div>
    </div>
</div>

        <script type="text/javascript" src="/webjars/js/jquery.js"></script>


        <script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
        <script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
        <script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
        <script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
        <script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
        <script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

        <script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
        <script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
        <script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

        <script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>



        <script src="/webjars/js/behaviour/voice-commands.js"></script>
        <script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

        <script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                App.init();
            });
        </script>
        <script type="text/javascript">

            function t4(a) {

                var array= new Array();
                $.ajax({

                    url: '/djt/breedarch/feeds1',
                    data: {productName : a} ,
                    dataType :'json',
                    async: false,
                    success: function (data) {
                        for (var i =0;i<data.length;i++){

                            if (data[i]!=null) {
                                array.push(data[i].price);
                            }else {
                                array.push(0);
                            }
                        }


                    }
                });
                return array;


            }

            // ------近一年趋势变化图-----
            var feedpriceChart = echarts.init(document.getElementById('feedpriceChart'));
            option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data:['玉米','豆粕','麸皮','鱼粉','其它']

                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'玉米',
                        type:'line',

                        areaStyle: {normal: {}},
                        data:t4(1)
                    },
                    {
                        name:'豆粕',
                        type:'line',

                        areaStyle: {normal: {}},
                        data:t4(2)
                    },
                    {
                        name:'麸皮',
                        type:'line',

                        areaStyle: {normal: {}},
                        data:t4(3)
                    },
                    {
                        name:'鱼粉',
                        type:'line',

                        areaStyle: {normal: {}},
                        data:t4(4)
                    },
                    {
                        name:'其它',
                        type:'line',
                        areaStyle: {normal: {}},
                        data:t4(5)
                    }
                ]
            };
            feedpriceChart.setOption(option);

function showfeed(a) {
    var feed;
    switch (a){
        case 1:
            feed="玉米";
            break;
        case 2:
            feed="豆粕";
            break;

        case 3:
            feed="麸皮";
            break;

        case 4:
            feed="鱼粉";
            break;

        case 5:
            feed="其它";
            break;


    }
    return feed;
}



            function imtypes() {

                $(".feedtype").each(function () {

                    var a= showfeed(parseInt($(this).text()));
                    $(this).text(a);

                })
            }

            imtypes();

        </script>

</body>
</html>
